<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<html>
<head>
    <%@ include file="static_res.jsp"%>
    <title>Title</title>
</head>
<style>
    .btn, .btn-large {
        text-decoration: none;
        color: #fff;
        background-color: #ee6e73;
        text-align: center;
        letter-spacing: .5px;
        transition: .2s ease-out;
        cursor: pointer;
    }
</style>

<script>
    function toModel(i,j) {
        $('#pidvalue').val(i);

        $('#towho').text("To "+j);
    }
    $(function() {

        $('.modal').modal();

        $("#comsubmit").click(
            function() {
                if ($('#reply').val() == "") {
                    Materialize.toast('评论不能为空 ！', 3000);
                    return;
                }

                var param = "reply=" + $("#reply").val()+"&aid=${ATD.id}&uid=${ATD.uid}&atitle=${ATD.title}";

                $.ajax({
                    type : "POST",
                    url : "<%=path%>/comment/save",
                    data : param,
                    dateType : "text",
                    success : function(result) {
                        alert("return in");
                        if ("0" == result)
                            alert("error");
                        else if ("1" == result)
                            location.href="<%=path%>/article/getArticle?aid=${ATD.id}"
                    }
                });
            });

        $("#replyaction").click(
            function() {
                alert("ininin");
                if ($('#answer').val() == "") {
                    Materialize.toast('回复不能为空 ！', 3000);
                    return;
                }


                var param = "answer=" + $("#answer").val()+"&aid=${ATD.id}&pid="+$('#pidvalue').val()
                    +"&uid=${ATD.uid}&atitle=${ATD.title}";
                console.log(param);
                $.ajax({
                    type : "POST",
                    url : "<%=path%>/comment/saveAnswer",
                    data : param,
                    dateType : "text",
                    success : function(result) {
                        if ("0" == result)
                            alert("error");
                        else if ("1" == result)
                            location.href="<%=path%>/article/getArticle?aid=${ATD.id}"
                    }
                    });
                });
            });




</script>
<body>
<%@ include file="header.jsp"%>
<div class="container">
    <div class="section">
    <h2 class="center-align">${ATD.title}</h2>
    <h5 class="right-align">${ATD.name}</h5>
    <p class="right-align">${ATD.createTime}</p>
    <div class="divider"></div>
    <div>
        ${ATD.content}
    </div>
    </div>

    <div class="row">
            <div class="col s6 offset-s3">
                <div id="replytext" class="input-field">
                    <i class="material-icons prefix">mode_edit</i>
                    <textarea id="reply" class="materialize-textarea"></textarea>
                    <label for="reply">评论/回复</label>
                </div>

                <div class="row">
                    <div class="right">
                        <button class="btn waves-effect waves-light" type="button" name = "comsubmit" id="comsubmit">提交
                            <i class="material-icons right">send</i>
                        </button>
                    </div>
                </div>
                <c:forEach items="${replyList}" var="art">
                    <c:if test="${art.type == 0}">
                <div class="card-panel grey lighten-2 row">
                    <div class="col s3">
                        <div class="row">
                            <img class="circle im" width="75" height="75" src="<%=ipath%>${art.avatar}"><br>
                            <span>${art.name}</span><br>
                            <span>${art.createTime}</span>
                        </div>
                    </div>
                    <div class="col s9">
                        <div class="row">
                            ${art.reply}
                        </div>
                        <hr>
                        <c:forEach items="${replyList}" var ="com">
                            <c:if test="${com.pid == art.id}">
                                <div class="row">
                                    <div class="col s3">
                                        <img class="circle im" width="75" height="75" src="<%=ipath%>${com.avatar}">
                                        ${com.name}|${com.createTime}
                                    </div>
                                    <div class="col s9">
                                        ${com.reply}
                                    </div>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>

                    <a id="toreply" class="btn waves-effect waves-red" onclick="toModel(${art.id},'${art.name}')" href="#modal1">回复</a>
                </div>
                </c:if>
                </c:forEach>


            </div>
    </div>

</div>

<div id="modal1" class="modal">
    <blockquote>
        <p id="towho" class="flow-text"></p>
    </blockquote>
    <div class="input-field">
        <input id="pidvalue" type="hidden" value="">
        <input id="answer" type="text">
    </div>

    <div class="modal-footer">
        <a id="replyaction" class=" modal-action waves-effect waves-green btn-flat">回复</a>
    </div>
</div>
</body>
</html>
